
<template>
    <Card>
      <Row class="search-box">
        <Input placeholder="用户名/用户操作" v-model="query" clearable style="width:auto" @on-enter="getDataList"/>
        <Button type="default" @click="getDataList">查询</Button>
      </Row>
      <Row>
          <Table border :columns="col" :data="tableData"></Table>
      </Row>
      <Row>
        <Page class="page-info" :total="total" :page-size="pageSize" :current.sync="pageNum" show-elevator show-total @on-change="getDataList" size="small"/>
      </Row>
    </Card>
</template>
<script>
import { getLogList } from '@/api/data'
import { PAGESIZE } from '@/config/baseConfig.js'
import './list.less'

export default {
  data () {
    return {
      query: '',
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: PAGESIZE,
      col: [
        {
          title: 'ID',
          key: 'id',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username',
          align: 'center'
        },
        {
          title: '用户操作',
          key: 'operation',
          align: 'center'
        },
        {
          title: '请求方法',
          key: 'method',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '请求参数',
          key: 'params',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '执行时长(毫秒)',
          key: 'time',
          align: 'center'
        },
        {
          title: 'IP地址',
          key: 'ip',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createDate',
          align: 'center'
        }
      ]
    }
  },
  created: function () {
    this.getDataList()
  },
  methods: {
    async getDataList () {
      let data = await getLogList(this.query, this.pageNum, this.pageSize)
      if (data.code === 200) {
        this.dataListSelections = []
        this.total = data.page.totalCount
        this.pageNum = data.page.currPage
        this.tableData = data.page.list
      }
    }
  }
}
</script>
